<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
	<div v-for="user in userList" class="user" :style="{left:user.x, top: user.y}" @click="user.isShowState = !user.isShowState">
		<span v-show="user.isShowState" >{{ user.name }}</span>
	</div>
</div>

<style>
#main{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
.user{
	position: absolute;
	background-color: #20B2AA;
	color: white;
	padding: 20px 30px;
	border: 1px solid white;
	border-radius: 5px;
	height: 20px;
	line-height: 20px;
	width: 50px;
	cursor: pointer;
	user-select: none;
	text-align: center;
}
</style>

<script>
var _userNameList = [
		"刘子华",
		"陈尚钰",
		"梁光耀",
		"黄鹏涛",
		"覃健",
		"罗铿",
		"赵佰贤",
		"罗莹",
		"王政杰",
		"覃培源", "蒙天爱", "刘宏成", "黄承蒙", "贺园峰", "古豪", "李林钊", "李营香", "韦德伟", "王祥珉"
	]
var _userList = []
	
_userNameList.forEach(name => {		
	var user = {
		user: '',
		x: `${Math.random() * 100}%`,
		y: `${Math.random() * 100}%`,
		isShowState: false,
	} 
	_userList.push(user)
})

var vm = new Vue({
	el: '#main',
	data: {
		length: 19,
	}
})
</script>

<script src="">
	// 随机点名
	// 点名范围: ["刘子华", "陈尚钰", "梁光耀", "黄鹏涛", "覃健", "罗铿", "赵佰贤", "罗莹", "王政杰", "覃培源", "蒙天爱", "刘宏成", "黄承蒙", "贺园峰", "古豪", "李林钊", "李营香", "韦德伟", "王祥珉"]

	// 1 页面上根据点名范围显示对应数量的	标签, 标签内容是名字
	// 2 所有标签的位置随机分布
	// 3 隐藏所有标签内容, 鼠标点击标签显示对应标签的名字
	// 4 每个名字被点击的概率不一样
</script>